<template>
  <TodoHeader @addTodo="handleAdd" />
  <TodoMain>
    <TodoLI
      v-for="item in list"
      :key="item.id"
      v-bind="item"
      @toggle="handleToggleTodo"
      @edit="handleEditTodo"
      @del="handleDelTodo"
    ></TodoLI>
  </TodoMain>
  <TodoFooter
    :list="list"
    @toggle-All="handleToggleAllTodo"
    @clear-Finished="handleClearFinished"
    @clear-All="handleClearAll"
  />
</template>
<script setup>
// 导入hooks函数
import useTodos from './hooks/useTodos'
// 导入组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
import TodoLI from './components/TodoLI.vue'
// 从hooks函数解构方法
const {
  list,
  handleAdd,
  handleToggleTodo,
  handleEditTodo,
  handleToggleAllTodo,
  handleDelTodo,
  handleClearFinished,
  handleClearAll,
} = useTodos()
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
